<template>
  <div class="personal">
    <div class="personal-top" v-if="!!deviceID">
      <div class="personal-top-left">
        <img src="../assets/images/touxiang.jpg"/>
      </div>
      <div class="personal-top-right">
        <h3>{{ deviceID }}</h3>
        <p>
          <van-tag
            class="tag"
            size="medium"
            :color="tagColor" 
            :text-color="tagTextColor"
            :type='activeState === 2 ? "success" : "primary"'>
            {{activeStateConfig[activeState]}}
          </van-tag>
          <van-button v-if="activeState !== 2" class="activeBtn" size="mini" type="default" @click="activeDev">激活设备</van-button>
        </p>
        <p v-if="activeState === 2">激活码：{{ activeCode }}</p>
        <p v-if="activeState === 2">到期时间：{{ expiresTimeStr }}</p>
      </div>
    </div>
    <div class="personal-content">
      <van-cell to='agreement' is-link>服务协议</van-cell>
      <van-cell to='settings' is-link>权限管理</van-cell>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { getTimeStr } from '@/utils/index';
import { mapState } from "vuex";
import {
  Cell,
  Icon,
  Button,
  Tag,
} from "vant";

Vue.use(Cell);
Vue.use(Icon);
Vue.use(Button);
Vue.use(Tag);

export default {
  data() {
    return {
      activeStateConfig: {
        1: '未激活',
        2: '已激活',
        3: '已过期'
      }
    };
  },
  computed: {
    ...mapState({
      deviceID: 'deviceID',
      activeCode: 'activeCode',
      activeState: 'activeState',
      expiresTime: 'expiresTime',
    }),
    expiresTimeStr() {
      return getTimeStr(this.expiresTime, 'yyyy-MM-dd HH:mm');
    },
    tagColor() {
      const activeState = this.activeState;
      if (activeState === 1) {
        return '#9e9e9e';
      }
      if (activeState === 3) {
        return '#9e9e9e';
      }
      return '';
    },
    tagTextColor() {
      const activeState = this.activeState;
      if (activeState === 1) {
        return '#ffffff';
      }
      if (activeState === 3) {
        return '#ffffff';
      }
      return '';
    }
  },
  methods: {
    activeDev() {
      this.$store.commit("SET_TOTLE_DATA", {
        activationVisible: true,
      });
    },
  },
  mounted() {

  },
};
</script>

<style lang="scss" scoped>
.personal {
  &-content {
    background-color: #fff;
    box-shadow: 0 8px 12px #ebedf0;
    margin: 10px;
    border-radius: 10px;
    overflow: hidden;
  }
  &-top {
    display: flex;
    background: #fff;
    padding: 40px 15px;
    &-left {
      img {
        display: block;
        width: 100px;
        height: 100px;
        border-radius: 100px;
        overflow: hidden;
      }
    }
    &-right {
      display: block;
      margin-left: 20px;
      h3 {
        font-size: 16px;
      }
      p {
        display: block;
        font-size: 14px;
        color: #666;
        width: 100%;
        height: 25px;
        line-height: 25px;
        margin: 0 0 5px 0px;
        .tag {
          float: left;
          margin-top: 2px;
          margin-right: 5px;
        }
        .activeBtn {
          float: left;
        }
      }
    }
  }
}
</style>